<template>
  <div class="mainpage">
    <mt-header title=" " fixed></mt-header>
    <mt-tab-container v-model="mindex">
      <mt-tab-container-item id="首页">
        <mt-swipe :auto="4000" class="banner">
          <mt-swipe-item @click="$router.push('/Detail')"><img :src="banner1" alt=""></mt-swipe-item>
          <mt-swipe-item @click="$router.push('/Detail')"><img :src="banner2" alt=""></mt-swipe-item>
          <mt-swipe-item @click="$router.push('/Detail')"><img :src="banner3" alt=""></mt-swipe-item>
          <mt-swipe-item @click="$router.push('/Detail')"><img :src="banner4" alt=""></mt-swipe-item>
          <mt-swipe-item @click="$router.push('/Detail')"><img :src="banner5" alt=""></mt-swipe-item>
        </mt-swipe>
        <div class="njhinfo">
          <div class="logo"></div>
          <div class="txt">
            南京大学医学院附属口腔医院暨南京市口腔医院，创建于1947年，前身为国民政府中央卫生实验院牙病防治所。新中国成立后，其成为政府重点建设的5所全国中心城市口腔医疗机构之一。
          </div>
        </div>
        <div class="searchbar" @click="$router.push('/Search')">
          <i class="mintui mintui-search"></i>
          快速搜索
        </div>
        <div class="homebox">
          <div class="btn" @click="$router.push('/Doctor')">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-yisheng"></use>
            </svg>
            专家列表</div>
          <div class="btn" @click="$router.push('/Result')">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-tiwen"></use>
            </svg>
            检验检查</div>
          <div class="btn" @click="$router.push('/Guide')">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiankangyachi"></use>
            </svg>
            就诊指引</div>
          <div class="btn" @click="$router.push('/Pay')">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-yiyuan"></use>
            </svg>
            在线缴费</div>
          <div class="btn" @click="$router.push('/Regpre')">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-xinxi"></use>
            </svg>
            预约挂号</div>
          <div class="btn" @click="$router.push('/Regtdy')">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-biji"></use>
            </svg>
            当天挂号</div>
        </div>
        <div class="hrow" @click="$router.push('/Detail')">
          <i class="iconfont icon-zuixingonggaofuzhi"></i>
          <mt-swipe :auto="9999" :show-indicators="false">
            <mt-swipe-item>致公党南京市口腔医院支部参加“致福送诊”...</mt-swipe-item>
            <mt-swipe-item>口院党委开展“不忘初心 牢记使命”系列活动...</mt-swipe-item>
            <mt-swipe-item>我院教学成果获日内瓦发明展银奖</mt-swipe-item>
            <mt-swipe-item>同济大学附属口腔医院参访团来我院参观交流...</mt-swipe-item>
            <mt-swipe-item>南京大学正畸大讲堂第二讲圆满结束</mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="hrow" @click="$router.push('/Map')"><i class="iconfont icon-ditu2"></i>医院与各门诊的地址<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="$router.push('/Detail')"><i class="iconfont icon-peixunjiaoyu"></i>健康教育<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="$router.push('/Detail')"><i class="iconfont icon-keyanqianxian"></i>科研动态<i class="mintui mintui-back rowgn"></i></div>
      </mt-tab-container-item>
      <mt-tab-container-item id="智能导诊">
        <div class="zndz">
          <svg slot="icon" class="icon" aria-hidden="true">
            <use xlink:href="#icon-nurse"></use>
          </svg>
          <div class="askingbox">
            <p v-if="cindex==1">您好，请在下方选单中，点击选取您需要的问题</p>
            <p v-if="cindex==2 || cindex ==3">好的，请再回答以下问题问题</p>
            <p v-if="cindex==4">鉴于您所提供的情况，我么建议您去某某某科室挂号，请选择挂号方式</p>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-heartbeat"></use>
            </svg>
          </div>
        </div>
        <div class="choosebox" @click="cindex = 2" v-if="cindex==1">
          <div class="choose">牙齿酸疼</div>
          <div class="choose">牙齿矫正</div>
          <div class="choose">牙齿护理</div>
          <div class="choose">牙龈问题</div>
          <div class="choose">口舌方面</div>
          <div class="choose">咬合关节</div>
          <div class="choose">面部外唇</div>
          <div class="choose">其他问题</div>
        </div>
        <div class="choosebox" @click="cindex = 3" v-if="cindex==2">
          <div class="choose">二级问题</div>
          <div class="choose">二级问题</div>
          <div class="choose">二级问题</div>
          <div class="choose">二级问题</div>
        </div>
        <div class="choosebox" @click="cindex = 4" v-if="cindex==3">
          <div class="choose">最后级问题</div>
          <div class="choose">最后级问题</div>
        </div>
        <div class="choosebox" v-if="cindex==4">
          <div class="choose big" @click="$router.push('/regpre')">预约挂号</div>
          <div class="choose big" @click="$router.push('/regtdy')">当天挂号</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="我的">
        <div class="myhead">
          <div class="headpic" v-if="acct == 1"></div>
          <div class="headpic second" v-if="acct == 2"></div>
          <div class="headpicborder"></div>
          <div class="lftcircle" @click="$router.push('/Mysick')">我的病例</div>
          <div class="rgtcircle" @click="$router.push('/Myreg')">我的挂号</div>
          <div class="changeacct" @click="popupVisible=!popupVisible"></div>
          <mt-cell title="范臣臣" label=" 点击切换" v-if="acct == 1">您的就诊卡：000222000222 <i class="mint-cell-allow-right lefticon"></i></mt-cell>
          <mt-cell title="李冰冰" label=" 点击切换" v-if="acct == 2">您的就诊卡：000333000333 <i class="mint-cell-allow-right lefticon"></i></mt-cell>
        </div>
        <div class="hrow" @click="$router.push('/Paylist')"><i class="iconfont icon-shouye7"></i>我的账单<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="$router.push('/Myrest')"><i class="iconfont icon-icon2"></i>我的住院<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="$router.push('/Myinfo')"><i class="iconfont icon-icon"></i>我的信息<i class="mintui mintui-back rowgn"></i></div>
        <div class="grayrow"></div>
        <div class="hrow" @click="$router.push('/Map')"><i class="iconfont icon-icon1"></i>关于我们<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="$router.push('/Feedback')"><i class="iconfont icon-icon4"></i>反馈<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="$router.push('/Detail')"><i class="iconfont icon-shouye5"></i>客服<i class="mintui mintui-back rowgn"></i></div>
        <div class="grayrow"></div>
        <div class="hrow" @click="$router.push('/Newacct')"><i class="iconfont icon-shouye8"></i>添加绑卡<i class="mintui mintui-back rowgn"></i></div>
        <div class="hrow" @click="logout"><i class="iconfont icon-shouye4"></i><font>退出登录</font><i class="mintui mintui-back rowgn"></i></div>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar v-model="mindex" fixed>
      <mt-tab-item id="首页">
        <svg slot="icon" class="icon" aria-hidden="true">
          <use xlink:href="#icon-shield"></use>
        </svg>
        首页
      </mt-tab-item>
      <mt-tab-item id="智能导诊" class="circlebtn">
        <svg slot="icon" class="icon" aria-hidden="true">
          <use xlink:href="#icon-stethoscope"></use>
        </svg>
        智能导诊
      </mt-tab-item>
      <mt-tab-item id="我的">
        <svg slot="icon" class="icon" aria-hidden="true">
          <use xlink:href="#icon-tablet"></use>
        </svg>
        我的
      </mt-tab-item>
    </mt-tabbar>
    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  import banner1 from '@img/banner1.jpeg';
  import banner2 from '@img/banner2.jpeg';
  import banner3 from '@img/banner3.jpeg';
  import banner4 from '@img/banner4.jpeg';
  import banner5 from '@img/banner5.jpeg';
  export default {
    name: 'main',
    data () {
      return {
        banner1,
        banner2,
        banner3,
        banner4,
        banner5,
        mindex: '首页',
        cindex:1,
        acct:1,
        popupVisible:false,
        slots: [
          {
            flex: 1,
            values: ['范臣臣-卡号：000222000222', '李冰冰-卡号000333000333'],
            className: 'slot1',
            textAlign: 'center'
          }
        ]
      }
    },
    methods: {
      logout(){
        MessageBox.confirm('确定登出么？', '退出')
      },
      onValuesChange(picker, values) {
        if(this.slots[0].values[0]==values){
            this.acct = 1
        }else{
            this.acct = 2
        }
      }
    },
    computed: {

    },
    watch: {

    }
  }
</script>

